<template>
    <div class="wh-100" v-loading="loading" style="background-color: white">
        <div style="height: 60px" class="w-100 d-flex-between-center px-12 bor-base-b">
            <div class="pl-24 fs-18 fw-7">双选会</div>
            <div class="">
                <Button type="primary"  style="margin-left: 20px" @click="$router.push({ name: 'ReleaseADoubleSelectionMeeting' })">发布双选会</Button>
                <Button style="background-color: white" class="" @click="toSiteManagement">场地设置</Button>
            </div>
        </div>
        <div class="w-100 h-80 px-12">
            <div class="w-100 h-10 d-flex-between-center">
                <div >
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-left: 10px; margin-right: 20px"></el-checkbox>
                    <Button style="background-color: white" @click="downloadById">导出所选数据</Button>
                </div>
                <div >
                    <Button style="background-color: white" @click="download">导出全部数据</Button>
                    <Button type="dashed" @click="changeTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
                </div>
                <div class="d-flex w-75 ">
                    <Select  class="ml-auto w-15" v-model="attendStatus" placeholder="活动状态" style="">
                        <Option v-for="item in activityStatusList" :key="item.value" :value="item.value">{{item.label}}</Option>
                    </Select>
                    <Select class="mr-12 w-15 ml-12" v-model="attendMethod" placeholder="活动类型" style="">
                        <Option v-for="item in activityTypeList" :key="item.value" :value="item.value">{{item.label}}</Option>
                    </Select>
                    <Input
                        type="text"
                        class="mr-12 w-20"
                        @on-keyup="titleSearch=titleSearch.replace(/\s/g,'')"
                        v-model="titleSearch"
                        placeholder="请输入双选会标题"
                        style="cursor: pointer"
                    ></Input>
                    <Button type="primary" @click="search">搜索</Button>
                </div>
            </div>
            <Alert v-show="openTip" show-icon>
                已选择
                <span>{{ checkedItems.length }}</span>
                项
                <a @click="toggleSelection">清空</a>
            </Alert>
            <div :class="{ 'h-85': openTip, 'h-90': !openTip }" class="w-100 h-85 overflow-auto-hidden">
                <!--内容-->
                <template v-if="list.length > 0">
                    <div class="" style="height: 240px" v-for="item in list">
                        <div class="d-flex-between-center h-20" style="background-color: #f8f8f9">
                            <div class="d-flex">
                                <el-checkbox v-model="item.checked" @change="handleCheckChange(item)" style="margin-left: 10px"></el-checkbox>
                                <div class="fs-14 fw-6 color-change" style="margin-left: 20px; cursor: pointer;color: #333333" @dblclick="upadateData(item)">
                                    {{ item.activityName }}
                                </div>
                            </div>

                            <div class="d-flex">
                                <div class="mr-1 fs-12" style="color: #1d8ce0; cursor: pointer" @click="downloadLink(item.id)">点击下载小程序码&链接</div>
                                <div class="mr-1 fs-12" style="color: #1d8ce0; cursor: pointer">
                                    是否发布
                                    <el-switch v-model="item.isPublish" active-color="#1d8ce0" inactive-color="#e0e0e0" :width="50" @change="isPublish(item.id, item.isPublish)"></el-switch>
                                </div>
                                <div class="fs-12 pr-12" style="color: #1d8ce0; cursor: pointer" @click="topDialog(item.id)">置顶设置 排序:{{ item.sortOrder ? item.sortOrder : '-' }}</div>
                            </div>
                        </div>
                        <div class="h-50 d-flex-between-center bor-base-b">
                            <div class="d-flex d-flex-center">
                                <!--            <div  style="width: 100px;height: 80px;margin-right: 10px;">-->
                                <!--              <el-image>-->
                                <!--                <div slot="error" class="image-slot">-->
                                <!--                  <i class="el-icon-picture-outline"></i>-->
                                <!--                </div>-->
                                <!--              </el-image>-->
                                <!--            </div>-->
                                <div style="width: 100px; height: 50px; margin-right: 10px" class="mx-12">
                                    <!--                  <el-image :src="item.activityCover" fit="cover"></el-image>-->
                                    <el-image :src="item.activityCover" style="width: 100px; height: 50px;" fit="cover" :preview-src-list="[item.activityCover]">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </div>
                                <div class="d-flex flex-column">
                                    <span class="fs-12" style="margin-bottom: 8px">活动类型：{{ item.attendMethod }}</span>
                                    <span class="fs-12" style="margin-bottom: 8px" v-show="item.attendMethod === '现场活动'">举办地点：{{ item.fullAddress }}</span>
                                    <span class="fs-12" style="margin-bottom: 8px">主办方：{{ item.activityOrganizer }}</span>
                                </div>
                            </div>
                            <div class="w-50 fs-12">
                                <!--                <steps :active="item.timeStage">-->
                                <!--                  <step title="报名开始"></step>-->
                                <!--                  <step title="报名结束"></step>-->
                                <!--                  <step title="召开时间"></step>-->
                                <!--                  <step title="活动结束时间"></step>-->
                                <!--                </steps>-->
                                <el-steps :active="item.timeStage" :space="200" align-center space="300px">
                                    <el-step title="报名开始" :description="item.applicationStartTime">1</el-step>
                                    <el-step title="报名结束" :description="item.applicationEndTime"></el-step>
                                    <el-step title="召开时间" :description="item.activityStartTime"></el-step>
                                    <el-step title="活动结束时间" :description="item.activityEndTime"></el-step>
                                </el-steps>
                            </div>
                            <div class="d-flex flex-column">
                                <div class="d-flex-between-center" style="margin-bottom: 10px">
                                    <el-button size="small" type="primary" @click="toAuditEnterprise(item.id)">审核报名的企业</el-button>
                                    <el-button size="small" @click="intoBoothAllocation(item.id)" v-show="item.attendMethod === '现场活动'">展位分配</el-button>
                                    <el-button size="small" @click="intoBoothAllocation(item.id)" v-show="item.attendMethod === '线上活动'">排序展示</el-button>
                                </div>
                                <div class="d-flex-between-center">
                                    <el-button size="small" @click="intoCheckInManagement(item.id)">签到管理</el-button>
                                    <el-button size="small" @click="infoJump(item)">信息公示</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="h-25 d-flex-between-center">
                            <div class="">
                                <span class="mr-1 fs-12">发布时间:{{ item.publishTime }}</span>
                                <span class="mr-1 fs-12">查看次数：{{ item.viewsNumber }}</span>
                                <span class="fs-12">预约次数:{{ item.bookingNumber }}</span>
                            </div>
                            <div>
                                <span class="mr-1 fs-12" style="color: #1d8ce0; cursor: pointer" @click="sendInvitations(item.id)">发送邀请函</span>
                                <span class="mr-1 fs-12" style="color: #1d8ce0; cursor: pointer" @click="upadateData(item)">编辑</span>
                                <span class="mr-1 fs-12" style="color: #1d8ce0; cursor: pointer" @click="deleteData(item.id)">删除</span>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="wh-100 d-flex-center bor-base-t fs-14" style="color: #909399">暂无数据</div>
                </template>
            </div>
        </div>
        <div class="w-100 h-10 fs-14 d-flex-center">
            <Page
                show-sizer
                show-total
                :total="pageTotal"
                :current="pageParams.pageNumber"
                :page-size="pageParams.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                show-elevator
            />
        </div>
        <el-dialog title="小程序&链接" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="smallProgramForm" label-width="100px">
                <el-form-item label="网页链接" class="">
                    <el-input v-model="smallProgramForm.url" id="linkText" readonly="true" class="w-50 mr-12"></el-input>
                    <el-button @click="copyText(smallProgramForm.url)">点击复制</el-button>
                </el-form-item>
                <el-form-item label="小程序路径">
                    <el-input v-model="smallProgramForm.path" readonly="true" class="w-50 mr-12"></el-input>
                    <el-button @click="copyText(smallProgramForm.path)">点击复制</el-button>
                </el-form-item>
                <el-form-item label="">
                    <div class="d-flex flex-column">
                        <img src="../mutualSelection/images/小程序.jpg" style="width: 258px;height: 258px" alt="">
                         <a href="https://hnbysjy.jyt.henan.gov.cn/img/%E5%B0%8F%E7%A8%8B%E5%BA%8F.96c4d0b0.jpg" download="小程序.jpg" class="w-30 d-flex-around-center ">点击下载小程序码</a>
<!--                        <div id="qrcodeId" ref="qrcode" style="width: 200px; height: auto"></div>-->
<!--                        <div @click="saveQRCode" style="margin-left: 60px; color: #2b85e4; cursor: pointer">点击下载小程序码</div>-->
                    </div>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="置顶排序" :visible.sync="topDialogFormVisible" class="">
            <div class="px-24 fs-14">
                <div class="bor-base-b bor-base-t mt-12" style="">
                    <el-form ref="form" :model="topForm" label-width="100px">
                        <el-form-item label="是否置顶" class="mt-12">
                            <el-radio-group v-model="topForm.isTop">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input type="number" v-model="topForm.sortOrder" style="width: 15%"></el-input>
                            <span style="color: #909399; margin-left: 20px">数字越小约靠前，0不参与置顶排序，根据发布时间排序</span>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="py-12" style="height: 70px">
                    <el-button type="primary" style="float: right; margin-left: 12px" @click="topSubmit">确定</el-button>
                    <el-button style="float: right" @click="topClose">取消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="发送邀请函" :visible.sync="sendDialogFormVisible" class="">
            <div class="px-24 fs-14">
                <div class="bor-base-b bor-base-t mt-12" style="">
                    <el-form ref="form" :model="sendForm" label-width="130px">
                        <el-form-item label="发送用户类别" class="mt-12">
                            <el-radio-group v-model="sendForm.type">
                                <el-radio :label="1">用人单位</el-radio>
                                <el-radio :label="2">学生</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input
                                :placeholder="copyWriter"
                                @keyup.enter.native.prevent="handleEnterKey($event)"
                                onkeyup="this.value=this.value.replace(/，|,|\r\n|\n|\r/g,'\r\n')"
                                type="textarea"
                                :rows="8"
                                v-model.trim="sendForm.phoneList"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="py-12" style="height: 70px">
                    <el-button type="primary" style="float: right; margin-left: 12px" @click="sendSubmit">确定</el-button>
                    <el-button style="float: right" @click="sendClose">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// import step from '../../my-components/stepList/step.vue';
// import steps from '.../.../my-components/stepList/steps.vue';
import DummyStatus from '../../../components/DummyStatus.vue';
import HeadComponents from '../../mutualSelection/systemManagement/my-components/headComponents.vue';
import { getShowAPI, ispublishAPI, deleteMutualSelectionAPI, topAPI, qrCodeAndUrlAPI, sendInvitationsAPI } from '../../../api/bys/recruitmentManagement/index';
import { deleteData } from '../../../api';
import QRCode from 'qrcodejs2';
import { electionExportAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';
export default {
    // components: {HeadComponents,DummyStatus,step,steps},
    components: { HeadComponents, DummyStatus },
    //

    data() {
        return {
           copyWriter:"一个手机号一行，如：\n" +
               "18137143869\n" +
               "18137143860\n" +
               "18137143869\n" +
               "18137143860",
            srcList: ['https://elevator4s-oss.oss-cn-hangzhou.aliyuncs.com/2021/05/07/b632db6a837f46e0950670277fa9e5e5multipartFile.png'],
            sendDialogFormVisible: false,
            topDialogFormVisible: false,
            dialogFormVisible: false,
            smallProgramForm: {
                url: 'https://hnbysjy.jyt.henan.gov.cn/bys/#/main/provincialDoubleElectionMeeting',
                path: 'https://hnbysjy.jyt.henan.gov.cn/img/%E5%B0%8F%E7%A8%8B%E5%BA%8F.96c4d0b0.jpg',
                qrCode: 'https://springboot-lcy.oss-cn-hangzhou.aliyuncs.com/img/image-20231208121422321.png'
            },
            sendForm: {
                type: '',
                phoneList: ''
            },
            topForm: {
                isTop: true,
                sortOrder: 0,
                doubleElectionId: ''
            },
            isIndeterminate: false,
            checkAll: false,
            checkedItems: [],
            isEmpty: false,
            loading: false,
            attendStatus: '全部',
            attendMethod: '全部',
            pageTotal: 0,
            pageParams: {
                pageNumber: 1,
                pageSize: 10,
                activityName: '',
                attendMethod: '全部',
                isPublish: '全部'
            },
            current: 2,
            stepsLabel: ['步骤1', '步骤2', '步骤3'],
            stepsDesc: ['描述1', '描述2', '描述3'],
            title: '双选会',
            titleSearch: '',
            checked: '',
            activityStatusList: [
                { value: '全部', label: '活动状态' },
                { value: '已发布', label: '已发布' },
                { value: '待发布', label: '待发布' }
            ],
            // isShow: this.list.isPublish,
            activityTypeList: [
                { value: '全部', label: '活动类型' },
                { value: '线上活动', label: '线上' },
                { value: '现场活动', label: '线下' }
            ],
            list: [],
            openTip:true,
            selectList:[],
        };
    },
    mounted() {
        this.getDoubleElectionData();
        console.log(this);
    },

    methods: {
        handleEnterKey(event) {
            // 阻止回车键提交表单等默认行为
            event.preventDefault();

            // 获取当前输入框的值，并在光标位置插入换行符
            const input = event.target;
            const currentValue = input.value;
            const selectionStart = input.selectionStart;
            const selectionEnd = input.selectionEnd;

            // 更新输入框的值，在选区前或选区后插入换行符（视情况而定）
            if (selectionStart === selectionEnd) {
                // 在光标处插入换行符
                input.value = currentValue.slice(0, selectionStart) + '\n' + currentValue.slice(selectionStart);
                input.setSelectionRange(selectionStart + 1, selectionStart + 1);
            } else {
                // 在选区中插入换行符
                const startText = currentValue.slice(0, selectionStart);
                const endText = currentValue.slice(selectionEnd);
                input.value = startText + '\n' + endText;
                input.setSelectionRange(selectionStart + 1, selectionStart + 1);
            }
        },
        changeTip(){
            this.openTip = !this.openTip
        },
        toggleSelection() {
            this.handleCheckAllChange()
            this.checkAll=false
        },
        downloadById() {
            if ( this.selectList.length == 0){
                this.$Message.warning({
                    content: '请选择数据',
                    duration: 5,
                    closable: true
                });
                return;
            }
            electionExportAPI({ids: this.selectList}).then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '双选会信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });

        },
        download() {
            electionExportAPI().then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '双选会信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },


        //双选会小程序码
        GenerateQRcode() {
            this.$refs.qrcode.innerHTML = ''; //清除二维码方法一
            new QRCode(this.$refs.qrcode, {
                // 此处的qrcode为上面div的id
                text: 'http://124.70.22.59:8090/#/main/viewDetailsAboutADoubleMeeting',
                width: 220,
                height: 220,
                colorDark: '#000000',
                colorLight: '#ffffff'
            });
            console.log('http://test.cosmicoin.cn:8090/singup/signIn?' + this.studentParams.doubleElectionId);
        },
        saveQRCode() {
            const qrcode = document.querySelector('#qrcodeId');
            const canvas = qrcode.querySelector('canvas');
            const imgurl = canvas.toDataURL('image/jpeg');
            const a = document.createElement('a');
            a.href = imgurl;
            a.download = '双选会小程序码.png'; // 图片名称
            a.click();
        },
        //选择
        handleCheckAllChange(value) {
            if (value) {
                let data = this.list.map(item => {
                    let { checked } = item;
                    checked = true;
                    return { ...item, checked };
                });
                this.list = data;
                this.list.map((item, index) => {
                    console.log(item.item);
                    this.checkedItems[index] = item.id;
                });
                this.selectList=this.checkedItems
                console.log(this.checkedItems, '全选中的值');
            } else {
                let data = this.list.map(item => {
                    let { checked } = item;
                    checked = false;
                    return { ...item, checked };
                });
                this.list = data;
                this.checkedItems = [];
                this.selectList=this.checkedItems
                console.log(this.checkedItems, '全不选的值');
            }
        },
        handleCheckChange(item) {
            if (item.checked) {
                this.checkedItems.push(item.id);
                console.log(this.checkedItems, '选中的值');
            } else {
                const index = this.checkedItems.indexOf(item.id);
                if (index !== -1) {
                    this.checkedItems.splice(index, 1);
                }
                console.log(this.checkedItems, '选中的值');
            }
            if (this.checkedItems.length === this.pageTotal) {
                this.checkAll = true;
                this.isIndeterminate = false;
            } else if (this.checkedItems.length > 0 && this.checkedItems.length < this.pageTotal) {
                this.isIndeterminate = true;
                this.checkAll = false;
            } else {
                this.isIndeterminate = false;
                this.checkAll = false;
            }
        },
        //图片预览
        vbs(val) {
            this.srcList = [];
            this.srcList.push(val);
        },
        downs(type) {
            console.log('下载图片');
            var a = document.createElement('a');
            a.download = name || '小程序码';
            a.href = type;
            a.click();
        },
        topSubmit() {
            topAPI(this.topForm).then(res => {
                if (res.success) {
                    this.$message.success(res.message);
                    this.topDialogFormVisible = false;
                } else {
                    this.$message.error(res.message);
                    this.topDialogFormVisible = false;
                }
            });
        },
        topClose() {
            this.topDialogFormVisible = false;
        },
        toAuditEnterprise(id) {
            this.$router.push({ name: 'doubleSelectionOfEnterpriseQualificationAudit', query: { id: id } });
        },
        sendSubmit() {
            let phoneList=this.sendForm.phoneList.replace(/，|,|\r\n|\n|\r/g,',')
            sendInvitationsAPI({ ...this.sendForm,phoneList:phoneList }).then(res => {
                if (res.success) {
                    this.$Message.success(res.message);
                    this.sendDialogFormVisible = false;
                } else {
                    this.$Message.error(res.message);
                    this.sendDialogFormVisible = false;
                }
            });
        },
        sendClose() {
            this.sendDialogFormVisible = false;
        },
        topDialog(id) {
            this.topDialogFormVisible = true;
            this.topForm.doubleElectionId = id;
        },
        search() {
            this.pageParams.isPublish = this.attendStatus;
            this.pageParams.activityName = this.titleSearch;
            this.pageParams.attendMethod = this.attendMethod;
            this.pageParams.pageNumber = 1
            this.getDoubleElectionData();
        },
        // region TODO 分页
        changePage(val) {
            this.pageParams.pageNumber = val;
            //调接口
            this.getDoubleElectionData();
        },
        changePageSize(val) {
            this.pageParams.pageSize = val;
            //调接口
            this.getDoubleElectionData();
        },
        // endregion
        //跳转到展位分配
        intoBoothAllocation(id) {
            this.$router.push({ name: 'BoothAllocation', query: { id: id } });
        },
        //跳转到签到管理
        intoCheckInManagement(id) {
            this.$router.push({ name: 'CheckInManagement', query: { id: id } });
        },
        // 跳转到信息公示
        infoJump(item) {
            this.$router.push({ name: 'TheDoubleElectionWillBeAnnounced', query: { id: item.id, title: item.activityName } });
        },
        //跳转到场地设置
        toSiteManagement() {
            this.$router.push({ path: '/siteManagement/placeManagement' });
        },
        //编辑
        upadateData(row) {
            if (row.isPublish) {
                this.$router.push({
                    path: '/releaseADoubleSelectionMeeting',
                    query: {
                        routeParams: JSON.stringify(row)
                    }
                });
                // this.$message.error('双选会发布状态下不可进行编辑');
            } else {
                this.$router.push({
                    path: '/releaseADoubleSelectionMeeting',
                    query: {
                        routeParams: JSON.stringify(row)
                    }
                });
            }
        },
        sendInvitations(id) {
            this.sendDialogFormVisible = true;
        },
        //是否发布双选会
        isPublish(id, isPublish) {
            console.log(id, 'id');
            console.log(isPublish, 'isPublish');
            let paramsForm = {
                doubleElectionId: id,
                isPublish: isPublish
            };
            ispublishAPI(paramsForm).then(res => {
                if (res.success) {
                    this.$message.success(res.message);
                } else {
                    this.$message.error('发布失败，请重新发布或联系管理员');
                }
            });
        },
        //删除
        deleteData(id) {
            this.$confirm('此操作将删除该双选会, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteMutualSelectionAPI({
                        doubleElectionId: id
                    }).then(res => {
                        if (res.success) {
                            this.$message.success('删除成功');
                            this.getDoubleElectionData();
                        } else {
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // region TODO 点击按钮复制
        copyText(data) {
            let url = data;
            let oInput = document.createElement('input');
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select();
            console.log(oInput.value);
            document.execCommand('Copy');
            this.$message({
                message: '复制成功',
                type: 'success'
            });
            oInput.remove();
        },
        // endregion
        //点击下载小程序码&链接
        downloadLink(id) {
            console.log('点击下载小程序码&链接');
            // qrCodeAndUrlAPI({ shDoubleElectionId: id }).then(res => {
            //     console.log(res.result, '小程序码链接');
            //     if (res.success) {
            //         console.log(res.result, '小程序');
            //         // this.smallProgramForm = res?.result
            //     }
            // });
            this.dialogFormVisible = true;
            this.$nextTick(() => {
                this.GenerateQRcode();
            });
        },
        getDoubleElectionData() {
            this.loading = true;
            getShowAPI(this.pageParams)
                .then(res => {
                    this.loading = false;
                    let data = res.result.records;
                    if (res.success) {
                        if (data.length > 0) {
                            data = data.map((item, index) => {
                                return {
                                    ...item,
                                    checked: false
                                };
                            });
                            this.list = data;
                        } else {
                            this.list = [];
                        }
                        this.pageTotal = res?.result?.total || 0;

                        console.log(this.list, '双选会信息');
                        if (this.list.length === 0) {
                            this.isEmpty = true;
                        } else {
                            this.isEmpty = false;
                        }
                    } else {
                        this.pageTotal = 0;
                        this.list = [];
                        this.isEmpty = true;
                    }
                })
                .catch(err => {
                    this.loading = false;
                    console.log(err);
                });
        }
    }
};
</script>
<style>
.el-input--mini .el-input__inner {
    height: 30px;
}

.el-input--mini .el-input__inner {
    height: 30px;
}

.el-step__title {
    font-size: 12px;
}
.color-change:active {
    color: #409eff;
}
</style>
